<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .box{
            width: 47rem;
            height: 83rem;
            background-color: rgb(249, 249, 249);
        }
        .div1{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: rgb(249, 249, 249);
        }
        .d1{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 1rem;
            background-color: rgb(227, 227, 229);
            border-radius: 1rem;
            text-align: center;
            line-height: 4rem;
            font-size: 2rem;
        }
        .d4{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
        }
        .img1{
            width: 2rem;
            height: 2rem;
        }
        .d2{
            width: 45rem;
            height: 3rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d3{
            width: 1rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 0.5rem;
        }
        .img2{
            width: 1rem;
            height: 2rem;
        }
        .p2{
            width: 13rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 16rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: center;
        }

        .div2{
            width: 47rem;
            background-color: white;
        }
        .d5{
            width: 47rem;
            height: 6rem;
            border: 0.2rem solid rgb(244,244,244);
            position: relative;
        }
        .p3{
            width: 15rem;
            height: 2rem;
            font-size: 1.4rem;
            line-height: 2rem;
            position: absolute;
            top: 2rem;
            left: 2rem;
            color: slategrey;
        }
        .i1{
            border: 0;
            width: 30rem;
            height: 4rem;
            position: absolute;
            top: 1rem;
            left: 10rem;
            font-size: 1.4rem;
        }
        .d7{
            width: 6rem;
            height: 4rem;
            position: absolute;
            top: 1rem;
            right: 2rem;
            border: 0.1rem solid rgb(200,200,200);
            border-radius: 2rem;
        }
        .d001{
            width: 4rem;
            height: 4rem;
            position: absolute;
            top: 0rem;
            left: 0rem;
            border: 0.1rem solid rgb(200,200,200);
            border-radius: 2rem;
        }
        .div3{
            width: 42rem;
            height: 5rem;
            margin-top: 5rem;
            margin-left: 3rem;
            text-align: center;
            line-height: 5rem;
            font-size: 2rem;
            background-color: rgb(224, 224, 224);
            color: rgb(129, 129, 129);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d1">
                    gome.com.cn
                <div class="d4">
                    <img src="img/jian.png" alt="" class="img1">
                </div>
            </div>
            <div class="d2">
                <div class="d3">
                    <img src="img/navleft.png" alt="" class="img2">
                </div>
                <div class="p2">选择新地址</div>
            </div>
        </div>

        <div class="div2">
            <div class="d5">
                <div class="p3">收货人：</div>
                <input type="text" class="i1">
            </div>
            <div class="d5">
                <div class="p3">手机号码：</div>
                <input type="text" class="i1">
            </div>
            <div class="d5">
                <div class="p3">选择地区：</div>
                <input type="text" class="i1">
            </div>
            <div class="d5">
                <div class="p3">详细地址：</div>
                <input type="text" class="i1">
            </div>
            <div class="d5">
                <div class="p3">设为默认地址</div>
                <div class="d7">
                    <div class="d001"></div>
                </div>
            </div>
        </div>

        <div class="div3">保存</div>

    </div>


    
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script>
        var t1,t2,t3,t4
        //移动端匹配
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }

        $(".d3").click(function(){
            localStorage.t1 = t1;
			localStorage.t2 = t2;
			localStorage.t3 = t3;
            localStorage.t4 = t4;
			window.location.href = "地址.html"
		})
			
		$(":text").on("change",function(){
			if($(":text:eq(0)").val()!="" &&$(":text:eq(1)").val()!="" &&$(":text:eq(2)").val()!="" &&$(":text:eq(3)").val()!="" )
			{
				$(".div3").css("background-color","red");
                t1= $(".i1:eq(0)").val();
				t2= $(".i1:eq(1)").val();
				t3= $(".i1:eq(2)").val();
				t4= $(".i1:eq(3)").val();
                console.log()
                console.log(t1,t2,t3,t4)
                
				$(".div3").on("click");
			}else{
				$(".div3").off("click");
			}
		})

        if($(".d001").css("left","0rem")){
            $(".d001").on("click",function(){
                $(".d001").css("left","2rem")
                $(".d001").css("backgroundColor","red")
            })
        }
            localStorage.t1 = t1;
			localStorage.t2 = t2;
			localStorage.t3 = t3;
            localStorage.t4 = t4;
    </script>
</body>
</html>